/**
 * 函数立即执行把轮播图的业务逻辑添加到utils中方便在其他js文件中去调用
 */
+((w)=>{
    w.utils.carousel = function carousel(arr) {
        let carouselWrap = document.querySelector("#carousel-wrapper");
        var indexCircle = document.querySelector("#indexCircle");
        var ulNode = document.createElement("ul");

        /**
         * 添加节点 把图片挂载至dom
         * 实现一排一排无缝衔接滑动的轮播图
         */
        addStructure();
        function addStructure() {
            arr = arr.concat(arr)
            for (let i = 0; i < arr.length; i++) {
                ulNode.innerHTML += `
                    <li>
                        <a href="#">
                            <img src="${arr[i]}" alt=""/> 
                        </a>
                    </li>`
            }
            //  给ul节点添加类目list
            ulNode.classList.add("list")
            // console.log(arr.length);


             // 等调接口进行响应式获取
            let styleNode = document.createElement("style");
            styleNode.innerHTML = `
                .list {
                    width: ${arr.length * 100}vw;
                }
            `
            document.head.appendChild(styleNode)
            carouselWrap.appendChild(ulNode)
        }

        /**
         *  事件在carouselWrap上滑动, 让ul的offsetWidth进行变化
         */
        let list = document.querySelector(".list");
        //list的偏移量
        let elementInitialX = 0;
        //手指触发的X坐标
        let initialFingerTouchedX = 0;
        //移动距离
        let moveDistance;
        let index = 0;
        let singleImgWidth = list.clientWidth / arr.length;

        let isInfinity = list.getAttribute("infinity") == null

        /**
         * 触摸开始
         */
        carouselWrap.addEventListener("touchstart", (event) => {
            //  获取触碰的初始位置
            let touchEvent = event.changedTouches[0];
            initialFingerTouchedX = touchEvent.clientX;
            console.log(initialFingerTouchedX)
            //  获取元素一开始的位置
            elementInitialX = list.offsetLeft;
            try {
                clearInterval(timer);
            } catch (error) {}
            list.style.transition = "0.3 s ease-in-out";
        });

        /**
         * 触摸移动
         */
        carouselWrap.addEventListener("touchmove", evt => {
            //  获取触摸横向移动的距离
            let touchEvent = evt.changedTouches[0];
            let movingFingerTouchedX = touchEvent.clientX;
            moveDistance = movingFingerTouchedX - initialFingerTouchedX;
            //  设置图片移动
            list.style.left = moveDistance + elementInitialX + "px";
            //  设置索引
            index = -parseInt(list.style.left) / singleImgWidth;
        });

        /**
         * 触摸结束
         */
        carouselWrap.addEventListener("touchend", evt => {
            //  判断图片是头还是尾
            if (Math.ceil(index) >= arr.length) {
                //  如果无限循环 则跳到最后一张
                if (isInfinity) {
                    list.style.transition = "0s";
                    list.style.left = 0;
                    index = 0;
                }
            } else if (Math.floor(index) < 0) {
                if (isInfinity) {
                    list.style.transition = "0s";
                    list.style.left = -(singleImgWidth * (arr.length - 1)) + "px";
                }
            } else {
                //  判断如果滑动的距离超过图片的三分之一就划过去 不到一半则回位
                if (index - Math.floor(index) >= 0.3) {
                    list.style.left = -Math.ceil(index) * singleImgWidth + "px";
                    index ++;
                } else {
                    if (Math.floor(index) === 0) {
                        list.style.left = Math.floor(index) * singleImgWidth + "px";
                    } else {
                        list.style.left = -Math.floor(index) * singleImgWidth + "px";
                    }
                }
                //  松开时 启动定时器
                auto();
            }
        });

        let timer;

        /**
         * 开始轮播
         */
        auto();
        function auto() {
            let autoReplay = carouselWrap.getAttribute("autoreplay");
            autoReplay = autoReplay != null
            list.style.transition = "0.5s ease-in-out";
            if (autoReplay) {
                timer = setInterval(() => {
                    //  left减去一个单位
                    if (list.offsetLeft > -singleImgWidth * (arr.length - 1)) {
                        list.style.left = -(Math.floor(index) + 1) * singleImgWidth + "px";
                        index ++;
                    } else {
                        list.style.left = "0px";
                        index = 0;
                    }
                }, 5000);
            }
        }

    }
})(window)